<div class="release-app-wrap" id="internalList">
  <!--改版-->
  <div class="release-app2">
    <div class="crumbs iframe-crumbs">
      <img class="crumbs_icon" src="./static/crumbs_icon.png" /><a
        href="./apps"
        >大众云盘</a
      ><span>/</span>应用列表
    </div>
    <!--/面包屑导航-->

    <div class="clearfix">
      <div class="left-collapse-box sidebar-fixed">
        <aside class="aside-left">
          <ul>
            <li>
              <a href="javascript:void(0);" class="left-collapse-title"
                ><img src="./static/right_bold.png" />大众云盘</a
              >
            </li>
            <li>
              <a href="javascript:;" id="InternalTestReleaseInnerUpload" onclick="switchTab('InternalTestReleaseInnerUpload')" 
                ><span class="iconfont icon-upload1"></span>上传应用</a
              >
            </li>
            <li class="active">
              <a href="javascript:;" id="InternalTestReleaseInner" onclick="switchTab('InternalTestReleaseInner')"><span class="iconfont icon-41"></span>应用列表</a
              >
            </li>
          </ul>
        </aside>
      </div>
      <div class="right-collapse-box">
        <div class="aside-right">
          <div class="table-list-wrap" style="min-height: 453px">
            <div class="table-list">
              <div class="app-table-wrap">
                <div class="table-wrap">
                  <div class="table-responsive">
                    <table class="table app-table">
                      <tbody>
                        <tr>
                          <th width="200" class="app-th-name">名称</th>
                          <th>大小</th>
                          <th width="200">下载链接</th>
                          <th>操作</th>
                        </tr>

                        <tr v-for="(item, index) in list" :key="index">
                          <td>
                              <div class="clearfix app-icon-name">
                                {{item.fileName}}
                              </div>
                          </td>
                          <td>{{item.size}}</td>
                          <td>
                            <a style="color: #333 !important;" class="ellipsis fl" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" target="_blank" 
                              :href="item.url" data-original-title="" title="">
                              {{item.url}}
                            </a>
                          </td>
                          <td>
                              <a href="javascript:;" @click="del(item)" app_id="642224244763131904" class="table-btn color-delete">
                                  删除
                              </a>
                          </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>
                  <!--暂无app-->
                  <div class="no-app text-center" v-if="list.length === 0">
                    <div class="mt60 small">
                      <img src="./static/icon-19.png" />
                    </div>
                    <div class="mt60 big">
                      <img src="./static/icon-19-1.png" />
                    </div>
                    <div class="color-333 mt20">暂无APP</div>
                    <!-- <a
                      href="./publish"
                      class="ms-btn ms-btn-primary btn-new-release clearfix mt20"
                      style="border-radius: 6px"
                    >
                      <span class="iconfont icon-upload fl"></span>
                      <span class="text fl">立即上传</span>
                    </a> -->
                  </div>
                  <!--/暂无app-->
                </div>
                <div style="text-align: center">
                  <ul id="pager"></ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--/改版-->
</div>

<script>
  
  new Vue({
    el: '#internalList',
    data: {
      list: [],
      searchKey: '',
      loading: null,
    },
    mounted() {
      this.query();
    },
    methods: {
        del(item){
          
          this.loading = this.$loading({
              lock: true,
              // text: '加载中',
              spinner: 'el-icon-loading',
            });
            axios({
                method: "POST",
                url: baseUrl + "/storage/delete",
                headers: {
                  authorization: localStorage.getItem("token")
                },
                data: {
                  id: item.id,
                },
            }).then(({ data }) => {
              this.loading.close();
              if (data.code === 200) {
                  this.$message({
                      message: '删除成功',
                      type: "success",
                  });
                  this.query();
              } else {
                  this.$message({
                      message: data.message,
                      type: "warning",
                  });
              }
            });
        },
        query(){
          
          this.loading = this.$loading({
              lock: true,
              text: '加载中',
              spinner: 'el-icon-loading',
            });
            axios({
                method: "POST",
                url: baseUrl + "/storage/list",
                headers: {
                  authorization: localStorage.getItem("token")
                },
                data: {
                  order: "",
                  orderBy: "",
                  searchKey: this.searchKey, // 
                  pageSize: 100000000, // 
                  pageNum: 1, // 
                  pid: "",
                  searchType: null
                },
            }).then(({ data }) => {
              this.loading.close();
              if (data.code === 200) {
                  this.list = data.result.records;
              } else {
                  this.$message({
                      message: data.message,
                      type: "warning",
                  });
              }
            });
        },
        
    },
  })
</script>